<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>私信</title>
    <link rel="stylesheet" type="text/css" href="/js/plugins/chat/chat.css" />
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/chat/flexible.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            //格式化时间
            function curentTime(date) {
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var clock = year + "-";
                if (month < 10)
                    clock += "0";
                clock += month + "-";
                if (day < 10)
                    clock += "0";
                clock += day + " ";
                if (hh < 10)
                    clock += "0";
                clock += hh + ":";
                if (mm < 10) clock += '0';
                clock += mm;
                return clock;
            }
            //格式化时间
            function curentTimeWithSeconds(date) {
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var ss = date.getSeconds();
                var clock = year + "-";
                if (month < 10)
                    clock += "0";
                clock += month + "-";
                if (day < 10)
                    clock += "0";
                clock += day + " ";
                if (hh < 10)
                    clock += "0";
                clock += hh + ":";
                if (mm < 10) clock += '0';
                clock += mm + ":";
                if (ss < 10) clock += "0";
                clock += ss;
                return clock;
            }


            /*发送消息*/
            function send(headSrc,str,sendTime){
                var html="<div class='send'>" +
                    '<div class="time">'+curentTime(new Date(sendTime))+'</div>\n' +
                    "<div class='msg'><img src="+headSrc+" />"+
                    "<p><i class='msg_input'></i>"+str+"</p></div></div>";
                upView(html);
            }
            /*接受消息*/
            function show(headSrc,str,sendTime){
                var html="<div class='show'>" +
                    '<div class="time">'+curentTime(new Date(sendTime))+'</div>\n' +
                    "<div class='msg'><img src="+headSrc+" />"+
                    "<p><i class='msg_input'></i>"+str+"</p></div></div>";
                upView(html);

            }
            /*更新视图*/
            function upView(html){
                $('.message').append(html);
                $('body').animate({scrollTop:$('.mes sage').outerHeight()-window.innerHeight},200)
            }


            //input输入框样式
            $('.footer').on('keyup','input',function(){
                if($(this).val().length>0){
                    $(this).next().css('background','#114F8E').prop('disabled',true);

                }else{
                    $(this).next().css('background','#ddd').prop('disabled',false);
                }
            })
            end();

            //获取登录用户的信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            var receiver;
            //获取url上的id
            var params = getParams();
            //判断是否有id
            if (params.id) {
                //发送请求 获取用户的信息
                $.get("/users/" + params.id, function (data) {
                    //回显接收人信息
                    $(".tit").html(data.nickName);
                    //给资料添加a链接
                    $("#ziliao").attr("href","/userProfiles.html?id="+params.id);
                    receiver=data;
                });
                //清掉聊天窗口其他人信息
                $(".message").html("");
                //回显已读的聊天数据
                $.get("/messages/"+user.id+"/privateMessages",{
                    "receiverId":params.id
                }, function (data) {
                    var list = data.list;
                    console.log(data);
                    //遍历
                    $.each(list,function (index,ele) {
                        //通过结果中发送者的id判断哪个是当前用户,是当前用户,就显示在右边
                        if(ele.sender.id == user.id && ele.receiver.id == params.id){
                            //调用show方法
                            show(ele.sender.headImgUrl,ele.messageContent.content,ele.sendTime);
                        }else if(ele.receiver.id == user.id && ele.sender.id == params.id) {
                            //调用send方法
                            send(ele.sender.headImgUrl,ele.messageContent.content,ele.sendTime);

                        }
                    });
                })
            }

            //点击发送按钮,调用show方法 input数据出现在聊天窗口
            $('.footer p').click(function(){
                //获取聊天内容
                var content = $(this).prev().val();
                if(content){
                    //调用show方法 传入发送人图像信息和聊天内容
                    show(user.headImgUrl,content,new Date());

                    //修改样式 发送完之后 按钮褪色 清空输入框内容
                    $(this).css('background','#ddd').prop('disabled',false);
                    $(this).prev().val("");
                    //发送请求将该条信息储存到数据库中
                    $.post("/messages",{
                        "receiver.id":params.id,
                        "sender.id":user.id,
                        "MessageContent.content":content,
                    },function (data) {
                        if (data.success){
                            end();
                        }
                    });
                }




            })


            var newTime = curentTimeWithSeconds(new Date());
            //设计一个定时 发送请求查询该条数据  参数发送人id 接收人id
            function getNewMessage() {
                $.get("/messages/" ,{
                    "receiverId":params.id,
                    "senderId":user.id,
                    "sendTime":newTime
                }, function (data) {
                    console.log(data);
                    if (data.list.length > 0) {
                       $.each(data.list, function (index, ele) {

                           if(ele.sender.id == params.id && ele.receiver.id==user.id){
                           //调用send方法
                            send(ele.sender.headImgUrl, ele.messageContent.content,ele.sendTime);

                               //设置这条信息状态为已读状态
                               $.ajax({
                                   type: "PUT",
                                   url: "/messages/"+ele.id
                               });

                           }



                        });
                        end();
                        //如果有新的消息,就刷新时间
                        newTime = curentTimeWithSeconds(new Date());
                    }
                });

            }
            window.setInterval(getNewMessage, 3000);

            //跳转到底部
            function end() {
                var c = window.document.body.scrollHeight;
                window.scroll(0, c);
            }


            //设置未浏览的消息状态为已读
            $.ajax({
                type: "PUT",
                url: "/messages/updateBySenderId/"+params.id
            });

        });



    </script>


</head>

<body>
<header class="header">
    <a class="back" href="/mine/message.html"></a>
    <h5 class="tit"></h5>
    <a id="ziliao"><div class="right">资料</div></a>
</header>
<div class="message">


</div>
<div class="footer">
    <img src="/img/images/hua.png" alt="" />
    <img src="/img/images/xiaolian.png" alt="" />
    <input type="text"  />
    <p>发送</p>
</div>
</body>

</html>